<script setup lang="ts">
import UserAvatar from "@/components/user-avatar/index.vue";

import { UserModel } from "@/api/model/user.model.ts";

defineProps<{
    current: UserModel | null,
    users: UserModel[] | IterableIterator<UserModel> | null | undefined
}>();
</script>

<template>
    <!-- 左侧用户列表 -->
    <n-scrollbar :x-scrollable="true">
        <div class="whitespace-nowrap">
            <!-- 自己 -->
            <span class="inline-block mr-2" v-if="current">
                <user-avatar :size="32" :qq="current.qq"/>
            </span>
            <!-- 其它用户 -->
            <template v-if="users" v-for="user in users" :key="user.id">
                <span v-if="user.id !== current?.id" class="inline-block mr-2">
                    <user-avatar :size="32" :qq="user.qq"/>
                </span>
            </template>
        </div>
    </n-scrollbar>
</template>

<style scoped>

</style>